Auth0 PasswordlessとMFAの設定方法(Twilio SMS)

Auth0 PasswordlessとMFAの設定方法(Twilio SMS)

SMS PasswordlessとMFAでよりセキュアなログインフローができます。
Clock Icon2022.05.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

概要

インターネット上、アカウントにアクセスすることにPasswordless(パスワードレス)やMFA(多要素認証)を使って、よりセキュアなログインフローができます。

Auth0上テスト用のSMS機能は回数制限がある(2022年5月時点は100回)ので、TwilioのSMS機能を使ってAuth0でPassworlessやSMSのMFAを設定してみようと思います。

事前準備

  • Twilioアカウント
  • Twilioの携帯番号(USリジョン、トライアルアカウントに無料で買えるはず)
  • Auth0テナント
  • Auth0のSPAテンプレートアプリ(callback URLなどを正しく設定される状態)
  • Email-Passwordでログインするアプリのユーザーアカウント(MFAテスト用)

Twilio Messaging Serviceの作成


Twilio ConsoleのMessaging Serviceに入ってもらって、Create Messaging Serviceを押します。

Step 1


名前は好きなのを入れて、目的はVerify usersにします。

Step 2


携帯番号をSenderとして追加します。

Step 3


Incoming MessagesDrop the messageにしてから(受信に料金が発生するかもしれませんので、受信を無視にします)、次に進めます。

Step 4

デフォルトのままにし、Complete Messagine Service Setup -> View my new Messaging Serviceで作ったMessaging ServiceのMessaging Service SIDほメモして置きます(後で使いますので)

Twilio Account SIDとAuth Tokenの確認

アカウントのダッシュボードに入って、Account SIDAuth Tokenをメモしてもらうか、別のタブで開いたままにし、これからAuth0のSMS設定に使います。

Auth0 Passwordless

Auth0テナントのAuthentication -> Passwordlessに入って、SMSをオンにします。

SMSをオンにして、新しいフォームが表示されます。
フォームに必要な情報を入れます。
- Twilio SID (Twilio Account SID)
- Twilio AuthToken (Twilio Auth Token) - SMS Source -> Use Messaging Service - Messaging Service SID
- SMS Syntax -> Markdown
を入力、設定します。

 

同じフォームのApplicationsタブに事前用意したSPA(もしくは他のテンプレートアプリ)をSMSオンにします。

 

Branding -> Universal Login -> Loginで、Customize Login Pageをオンにし、下にあるHTMLのところ、テンプレートをLock (Passworldless)にします。

 

設定したものをセーブすれば用意されたSPAを実行してみて、ログインボタンを押してからログイン画面に入ります。携帯番号のログイン画面が出ています。自分の番号を入力し、コードが送ってくれます。次の画面にコードを入力すればログイン成功となります。

MFA

(前のPasswordlessを設定した場合はまずPasswordlessをオフにし、Universal Loginもカスタマイズもオフにします)

Auth0ダッシュボードのSecurity -> Multi-factor Auth -> Phone Messageに入ります。

 


  • Twilio
  • SMS
  • Twilio SID (Twilio Account SID)
  • Twilio AuthToken (Twilio Auth Token)
  • SMS Source -> Use Messaging Service
  • Messaging Service SID
    の設定を行います。

 


そしてSecurity -> Multi-Fact Authの画面に戻って、最後の部分にRequire Multi-factor AuthAlwaysにし、設定をセーブします。
 


新規の「Email-Password」ユーザーを登録したら、携帯番号を紐づくことが聞かれてます。
自分の携帯番号を入力し、次の画面にコードを入力すればユーザー初期MFA設定が完成され、今後ログインする際は携帯番号にコードを送ることでログインするようになります。
 

以上です。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.